<template>
  <div id="entryAndExitRecords">
    <div></div>
    <div>
      <div></div>
      <div>
        <table border="0" cellspacing="0" cellpadding="0">
          <tr class="title">
            <th>车牌号</th>
            <th>出入位置</th>
            <th>时间</th>
            <th>类型</th>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.carCode }}</td>
            <td>{{ item.channelName }}</td>
            <td>{{ item.passTime }}</td>
            <td>{{ item.inOrOut?'出':'入' }}</td>
          </tr>
        </table>
      </div>
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :pager-count="pagerCount"
          @next-click="check"
          @prev-click="check"
          @current-change="check"
        >
        </el-pagination>

        <!-- :pager-count=pagerCount -->
        <!-- <button type="button" class="btn-total">共 {{ pagee }} 页</button> -->
      </div>
    </div>
  </div>
</template>

<script>
import { _entryAndExitRecords } from "../../http/api";
export default {
  name: "tbDyn",
  data() {
    return {
      showList: [], //用于展示的数据列表
      isShowAll: true, //如果数据长度小于显示条数，就全部显示，不做滚动处理
      nextIndex: 6, //此标志用以记录，下一条滚动出来的数据所在的下标
      rows2Show: 6, //页面上显示的条数
      intervalFlag: NaN, //定时执行的记录，用以关闭执行
      //原始数据列表
      tableData: [
        {
          carCode: "沪FE3322",
          passTime: "11/02/2023 15:30:09",
          parkID: "88",
          inOrOut: "1",
          channelID: "7",
          channelName: "2号门左(出场通道1)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FE3322\\沪FE3322_20231102153009645.jpg",
        },
        {
          carCode: "沪FE3322",
          passTime: "11/02/2023 15:30:09",
          parkID: "88",
          inOrOut: "1",
          channelID: "7",
          channelName: "2号门左(出场通道1)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FE3322\\沪FE3322_20231102153009645.jpg",
        },
        {
          carCode: "沪K79768",
          passTime: "11/02/2023 15:20:49",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪K79768\\沪K79768_20231102152049432.jpg",
        },
        {
          carCode: "沪AFY7732",
          passTime: "11/02/2023 15:16:38",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪AFY7732\\沪AFY7732_20231102151638756.jpg",
        },
        {
          carCode: "沪BTD023",
          passTime: "11/02/2023 15:16:16",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪BTD023\\沪BTD023_20231102151616062.jpg",
        },
        {
          carCode: "沪B347X9",
          passTime: "11/02/2023 15:14:56",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪B347X9\\沪B347X9_20231102151456452.jpg",
        },
        {
          carCode: "浙AS7N72",
          passTime: "11/02/2023 15:10:35",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\浙AS7N72\\浙AS7N72_20231102151034953.jpg",
        },
        {
          carCode: "沪A16Q19",
          passTime: "11/02/2023 15:07:45",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪A16Q19\\沪A16Q19_20231102150744942.jpg",
        },
        {
          carCode: "沪BT9321",
          passTime: "11/02/2023 15:07:24",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪BT9321\\沪BT9321_20231102150724033.jpg",
        },
        {
          carCode: "沪AB33375",
          passTime: "11/02/2023 15:06:47",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪AB33375\\沪AB33375_20231102150647049.jpg",
        },
        {
          carCode: "沪AD17252",
          passTime: "11/02/2023 15:05:37",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪AD17252\\沪AD17252_20231102150537719.jpg",
        },
        {
          carCode: "沪BAV565",
          passTime: "11/02/2023 15:01:15",
          parkID: "88",
          inOrOut: "0",
          channelID: "5",
          channelName: "1号门左(进场通道1)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪BAV565\\沪BAV565_20231102150115635.jpg",
        },
        {
          carCode: "沪FC3702",
          passTime: "11/02/2023 14:31:22",
          parkID: "88",
          inOrOut: "1",
          channelID: "7",
          channelName: "2号门左(出场通道1)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FC3702\\沪FC3702_20231102143122315.jpg",
        },
        {
          carCode: "沪FC3702",
          passTime: "11/02/2023 14:31:22",
          parkID: "88",
          inOrOut: "1",
          channelID: "7",
          channelName: "2号门左(出场通道1)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FC3702\\沪FC3702_20231102143122315.jpg",
        },
        {
          carCode: "沪EBG399",
          passTime: "11/02/2023 14:01:46",
          parkID: "88",
          inOrOut: "1",
          channelID: "8",
          channelName: "2号门右(出场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪EBG399\\沪EBG399_20231102140146202.jpg",
        },
        {
          carCode: "沪EYZ795",
          passTime: "11/02/2023 13:53:37",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪EYZ795\\沪EYZ795_20231102135337537.jpg",
        },
        {
          carCode: "沪B71P66",
          passTime: "11/02/2023 13:32:03",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪B71P66\\沪B71P66_20231102133203101.jpg",
        },
        {
          carCode: "沪NF0001",
          passTime: "11/02/2023 13:26:40",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪NF0001\\沪NF0001_20231102132640004.jpg",
        },
        {
          carCode: "沪BYB131",
          passTime: "11/02/2023 13:24:50",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪BYB131\\沪BYB131_20231102132450490.jpg",
        },
        {
          carCode: "沪FE3322",
          passTime: "11/02/2023 13:22:31",
          parkID: "88",
          inOrOut: "1",
          channelID: "7",
          channelName: "2号门左(出场通道1)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FE3322\\沪FE3322_20231102132231136.jpg",
        },
        {
          carCode: "沪FE3322",
          passTime: "11/02/2023 13:22:31",
          parkID: "88",
          inOrOut: "1",
          channelID: "7",
          channelName: "2号门左(出场通道1)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FE3322\\沪FE3322_20231102132231136.jpg",
        },
        {
          carCode: "沪AAB6259",
          passTime: "11/02/2023 13:12:06",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪AAB6259\\沪AAB6259_20231102131205997.jpg",
        },
        {
          carCode: "沪FE3322",
          passTime: "11/02/2023 13:11:00",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FE3322\\沪FE3322_20231102131100619.jpg",
        },
        {
          carCode: "沪A1H239",
          passTime: "11/02/2023 13:03:43",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪A1H239\\沪A1H239_20231102130343776.jpg",
        },
        {
          carCode: "沪JR7133",
          passTime: "11/02/2023 13:02:16",
          parkID: "88",
          inOrOut: "1",
          channelID: "8",
          channelName: "2号门右(出场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪JR7133\\沪JR7133_20231102130216180.jpg",
        },
        {
          carCode: "沪JR7133",
          passTime: "11/02/2023 13:02:16",
          parkID: "88",
          inOrOut: "1",
          channelID: "8",
          channelName: "2号门右(出场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪JR7133\\沪JR7133_20231102130216180.jpg",
        },
        {
          carCode: "沪AD26491",
          passTime: "11/02/2023 12:56:17",
          parkID: "88",
          inOrOut: "0",
          channelID: "5",
          channelName: "1号门左(进场通道1)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪AD26491\\沪AD26491_20231102125617645.jpg",
        },
        {
          carCode: "沪AC69633",
          passTime: "11/02/2023 12:37:59",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪AC69633\\沪AC69633_20231102123759435.jpg",
        },
        {
          carCode: "沪FVA008",
          passTime: "11/02/2023 12:36:06",
          parkID: "88",
          inOrOut: "1",
          channelID: "8",
          channelName: "2号门右(出场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FVA008\\沪FVA008_20231102123605918.jpg",
        },
        {
          carCode: "沪FVA008",
          passTime: "11/02/2023 12:36:06",
          parkID: "88",
          inOrOut: "1",
          channelID: "8",
          channelName: "2号门右(出场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FVA008\\沪FVA008_20231102123605918.jpg",
        },
        {
          carCode: "无车牌",
          passTime: "11/02/2023 11:21:34",
          parkID: "88",
          inOrOut: "1",
          channelID: "7",
          channelName: "2号门左(出场通道1)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\无车牌\\无车牌_20231102112134090.jpg",
        },
        {
          carCode: "沪FC3702",
          passTime: "11/02/2023 11:21:31",
          parkID: "88",
          inOrOut: "1",
          channelID: "8",
          channelName: "2号门右(出场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FC3702\\沪FC3702_20231102112131486.jpg",
        },
        {
          carCode: "沪FC3702",
          passTime: "11/02/2023 11:21:31",
          parkID: "88",
          inOrOut: "1",
          channelID: "8",
          channelName: "2号门右(出场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FC3702\\沪FC3702_20231102112131486.jpg",
        },
        {
          carCode: "沪FRX390",
          passTime: "11/02/2023 11:16:10",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪FRX390\\沪FRX390_20231102111610614.jpg",
        },
        {
          carCode: "沪ACQ1983",
          passTime: "11/02/2023 11:13:41",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪ACQ1983\\沪ACQ1983_20231102111341778.jpg",
        },
        {
          carCode: "无车牌",
          passTime: "11/02/2023 11:07:27",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\无车牌\\无车牌_20231102110727536.jpg",
        },
        {
          carCode: "无车牌",
          passTime: "11/02/2023 11:07:25",
          parkID: "88",
          inOrOut: "0",
          channelID: "5",
          channelName: "1号门左(进场通道1)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\无车牌\\无车牌_20231102110725703.jpg",
        },
        {
          carCode: "皖JE8751",
          passTime: "11/02/2023 10:36:32",
          parkID: "88",
          inOrOut: "0",
          channelID: "6",
          channelName: "1号门右(进场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\皖JE8751\\皖JE8751_20231102103632008.jpg",
        },
        {
          carCode: "沪B5W710",
          passTime: "11/02/2023 10:34:19",
          parkID: "88",
          inOrOut: "1",
          channelID: "8",
          channelName: "2号门右(出场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪B5W710\\沪B5W710_20231102103418999.jpg",
        },
        {
          carCode: "沪B5W710",
          passTime: "11/02/2023 10:34:19",
          parkID: "88",
          inOrOut: "1",
          channelID: "8",
          channelName: "2号门右(出场通道2)",
          imagePath:
            "http://172.16.17.254:9988\\Capture_Images\\20231102\\沪B5W710\\沪B5W710_20231102103418999.jpg",
        },
      ],
      str: "",
      MyMarhq: "",
      total: 100,
      pageSize: 5,
      pagee: "",
      table: [],
      pagerCount: 7,
      currentPage: 1,
    };
  },
  mounted() {
    // this.getEvents();
    this.list();
    // setInterval(() => {
    //   clearInterval(this.MyMarhq);
    //   this.getEvents();
    // }, 10000);
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 880;

        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  computed: {},
  methods: {
    page() {
      this.pagee = this.total / this.pageSize;
    },
    list() {
        let data = {
        cardcode: "",
        stime: "",
        etime: "",
        inOrOut: "",
        channelName: "",
        pageNum: this.currentPage,
        pageSize: "5",
      };
      _entryAndExitRecords(data)
        .then((res) => {
          console.log(res);
          this.tableData = res.data;
          this.total = res.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    check(res) {
      this.currentPage = res;
      this.list();
    },
    handleFilter() {
      this.list();
    },
   
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioY = window.innerHeight / 880;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
      //   this.setEcharts();
    },
  },
};
</script>

<style lang="less" scoped>
#entryAndExitRecords {
  font-weight: bold;
  // background-color: rgba(0, 0, 0, .6);

  width: 1712px;
  height: 880px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 50px 40px;

  box-sizing: border-box;

  > div:nth-child(1) {
    width: 100%;
    display: flex;

    > div:nth-child(1) {
      text-align: left;
      width: 479px;
      height: 71px;
      line-height: 71px;
      background: linear-gradient(
        93deg,
        rgba(0, 119, 245, 0.5),
        rgba(0, 118, 245, 0)
      );
      font-family: Source Han Sans CN;
      font-size: 40px;
      color: #fff;
      white-space: pre;

      > span {
        display: inline-block;
        margin-left: 30px;
        font-weight: 400;
      }
    }

    > div:nth-child(2) {
      text-align: left;
      flex: 0.9;
      height: 71px;
      line-height: 71px;
      font-family: Source Han Sans CN;
      font-size: 28px;
      color: #fff;
      white-space: pre;

      > span {
        display: inline-block;
        // margin-left: 10px;
      }

      > input {
        display: inline-block;
        width: 50%;
        font-size: 28px;
        border: none;
        background: none;
        border-bottom: 1px solid #fff;
        color: #fff;
      }

      > input:focus {
        outline: none;
      }
    }

    > div:nth-child(3) {
      text-align: left;
      width: 280px;
      // background-color: #fff;
      height: 71px;
      line-height: 71px;
      font-family: Source Han Sans CN;
      font-size: 38px;
      color: #fff;
      white-space: pre;

      > span {
        /* display: inline-block; */
        margin-left: 10px;
      }

      > input {
        display: inline-block;
        width: 80%;
        font-size: 38px;
        border: none;
        background: none;
        border-bottom: 1px solid #fff;
        color: #fff;
      }

      > input:focus {
        outline: none;
      }
    }

    > div:nth-child(4) {
      text-align: left;
      flex: 1;
      height: 71px;
      line-height: 71px;
      font-family: Source Han Sans CN;
      font-size: 38px;
      color: #fff;
      white-space: pre;

      > span {
        display: inline-block;
        margin-left: 20px;
      }

      > input {
        display: inline-block;
        width: 45%;
        font-size: 38px;
        border: none;
        background: none;
        border-bottom: 1px solid #fff;
        color: #fff;
      }

      > input:focus {
        outline: none;
      }
    }

    > div:nth-child(5) {
      flex: 1;
      text-align: right;

      img {
        cursor: pointer;
      }
    }
  }

  > div:nth-child(2) {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    > div:nth-child(1) {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 34px;
      color: #fff;
      // height: 86px;
      line-height: 86px;
      // margin-top: 29px;
    }

    > div:nth-child(2) {
      height: 100%;

      table {
        width: 100%;
        height: 100%;
        text-align: center;
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 3;
        overflow: hidden;
        font-weight: bold;

        th {
          height: 100px;
          color: #fff;
          // width: 100%;
          // display: flex;
          // justify-content: space-around;
          // align-items: center;
          font-size: 50px;
          text-align: center;
        }

        > tr:first-child {
          background-color: rgba(33, 76, 109, 0.5);
        }

        tr {
          height: 125px;
          color: #fff;
          width: 100%;
          // display: flex;
          // justify-content: space-around;
          // align-items: center;
          font-size: 37px;

          td {
            border-bottom: 2px solid #fff;
          }

          // text-align: center;

          // td:nth-child(1) {
          //     flex: 1;
          // }

          // td:nth-child(2) {
          //     flex: 1;
          // }

          // td:nth-child(3) {
          //     flex: 1;
          // }

          // td:nth-child(4) {
          //     flex: 1;
          // }

          // td:nth-child(5) {
          //     flex: 1;
          // }

          // td:nth-child(6) {
          //     flex: 1;
          // }
        }
      }
    }

    > div:nth-child(3) {
      margin: 24px 15px 0;
      height: 46px;
      display: flex;
      color: #fff;
      font-size: 24px;
      // padding: 17px 15px;
      justify-content: center;
      align-items: center;

      .btn-total {
        background-color: rgba(2, 4, 13, 0.5) !important;
        border: 2px solid #00ffff;
        color: #fff;
        font-size: 26px;
        height: 28px;
        padding: 0 23px;
        box-sizing: border-box;
        border-radius: 3px;
        height: 35px;
      }
    }
  }

  // >div:nth-child(3) {
  //     margin: 24px 15px;
  //     height: 46px;
  //     display: flex;
  //     color: #fff;
  //     font-size: 24px;
  //     // padding: 17px 15px;
  //     justify-content: center;
  //     align-items: center;

  //     .btn-total {
  //         background-color: rgba(2, 4, 13, 0.5) !important;
  //         border: 2px solid #00FFFF;
  //         color: #fff;
  //         font-size: 26px;
  //         height: 28px;
  //         padding: 0 23px;
  //         border-radius: 3px;
  //         height: 35px;
  //     }
  // }
}

.title {
  font-weight: bold;
}

::v-deep .el-pagination.is-background ul li {
  background-color: rgba(2, 4, 13, 0.5) !important;
  color: #fff;
  height: 50px;
  line-height: 50px;
  width: 55px;
  font-size: 35px;
  font-weight: 700;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  border: 2px solid #00ffff;
  color: #00ffff;
}

::v-deep .el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: rgba(2, 4, 13, 0.5) !important;
  height: 50px;
  width: 55px;
}

::v-deep .btn-prev {
  background-color: rgba(2, 4, 13, 0.5) !important;
  height: 50px;
  width: 55px;
}
/deep/ .el-icon-arrow-right:before {
  // content: ''; //右边“下一页”三角箭头
  color: #fff;
  font-size: 30px;
}

/deep/ .el-icon-arrow-left:before {
  // content: ''; //左边“上一页”三角剪头
  color: #fff;
  font-size: 30px;
}
</style>
